/**
 * Created by DELL on 2017/1/11.
 */
var index = -1;
var setTime;
$(document).ready(function(){
    var customer_nameInput =  $("#customer_name");
    var customer_nameInputOffset =customer_nameInput.offset();
    //注意，设置长和宽的时候用的是customer_nameInput
    //设置div对应的位置已经样式，隐藏
    $("#sdiv").hide().css("border","1px black solid").css("position","absolute")
        .css("top",(customer_nameInput.height() + customer_nameInputOffset.top + 6)+"px")
        .css("left",customer_nameInputOffset.left+"px")
        .width(customer_nameInput.width()+3);
    //添加键盘事件
    customer_nameInput.keyup(function(evevt) {
        //为浏览器兼容创建event对象
        var myEvent = evevt || window.event;
        //获得键盘事件对应的被按下那个键
        var mycode = event.keyCode;
        //如果按下a-z 或者backspace（退格键）或者delete键时
        if(mycode >= 65 && mycode <= 90  || mycode == 46 || mycode == 8){
        //取得文本中的值
        var customer_nameText = $("#customer_name").val();
         //如果文本框的值不为空
        if( customer_nameText != null && customer_nameText != ""){
        //取到div节点
        var sdiv = $("#sdiv");
        //设置div不在有被追加的类
        sdiv.html("");
        //进入ajax提交
         clearTimeout(setTime);
          setTime = setTimeout(check,1000);
          function check(){
              var customerText = $("#customer_name").val();
              SearchSql="and customer_name like'%"+customerText+"%'";
              $.post("./Customer/selectBySala.do", {"Search": SearchSql}, function (data) {
                  //取得服务器交互的值 并且包装成jquery对象
                  var jquertObj = $(data);
                  //在传回的数据扎到customer_name节点
               
                  var customer_nameNode = jquertObj.find("word");
                  //并且做循环遍历
                  customer_nameNode.each(function (i) {
                      //创建div
                      var divNode = $("<div>").attr("id",i).attr("tel",customer_nameNode.eq(i).attr("tel"))//.css("border","1px black solid");
                      divNode.mousemove(function(){
                          if(index != -1){
                              var myDiv = $("#sdiv").children("div");
                              myDiv.eq(index).css("background-color","white");
                          }
                          index = $(this).attr("id");

                          $(this).css("background-color","#81c0c0");
                      });
                      divNode.mouseout(function(){
                          var myDiv = $("#sdiv").children("div");
                          myDiv.eq(index).css("background-color","white");
                      });
                      divNode.click(function(){
                          var monText = $("#sdiv").hide().children("div").eq(index).text();
                          var customerTel = $("#sdiv").hide().children("div").eq(index).attr("tel");
                          //下表初始化
                          index = -1;
                          //将值赋在文本框中
                        
                          $("#customer_name").val(monText);
                          $("#tel").val(customerTel);
                      });
                      //将文本加到div的中并且追加到sdiv上
                    //  alert($(this));
                      divNode.html($(this).text()).appendTo(sdiv)
                  });
                  //如果返回来的值》0 ajax回来的时候有值
                  if (customer_nameNode.length > 0) {
                      //sdiv显示
                      $("#sdiv").show();

                  } else {
                      //如果没有值，就隐藏
                      $("#sdiv").hide();
                      //并且index为初始值
                      index =-1;
                  }
                  //ajax返回值格式为xml
              }, "xml")
          }
        }else{
            //如果不是按下对应的键，就隐藏
            $("#sdiv").hide();
            //还原初始值
            index =-1;
        }
      //如果按下 向上 向下键
    }else if(mycode==38|| mycode==40){

       if(mycode==38){ //向上
         //取得sdiv的所有子类节点
           var myDiv = $("#sdiv").children("div");
            //如果按下向上键 不是第一个的话
           if(index != -1){
               //首先将所有的子节点的背景颜色都变成白色
               myDiv.eq(index).css("background-color","white");
             //下表递减
              index--;

           }else{
              //若果是第一个，那么按向上键的时候就到了最下边高粱
               index = myDiv.length-1;
           }
           if( index == -1){

               index =  myDiv.length-1;
           }
           //根据下表高亮
           myDiv.eq(index).css("background-color","#81c0c0");
       }
       if(mycode==40){ //想下

           var myDiv = $("#sdiv").children("div");

           if(index != -1){
               myDiv.eq(index).css("background-color","white");

           }
           index++;

           if( index == myDiv.length){

               index = 0;
           }
           myDiv.eq(index).css("background-color","#81c0c0");
       }
    }else if(mycode == 13 ){

            if(index != -1){
                 //如果有高亮的div那么取到他的值
                var monText = $("#sdiv").hide().children("div").eq(index).text();
                var customerTel = $("#sdiv").hide().children("div").eq(index).attr("tel");
                //下表初始化
                $("#tel").val(customerTel);
                index = -1;
                //将值赋在文本框中
                $("#project_name").val(monText);

            }else{
                 //没有高亮的时候
               // alert("["+ $("#customer_name").val()+"]  被提交了");
                $("#sdiv").hide();
            }
        }
    });

   
})
